<template>
 <div class="container">
  <!-- {{data}} -->
    <el-dialog
      @close="closed"
      @open="open"
      :title="up=='add'?'新增目录':'新增标签'"
      :visible="value"
      width="400px">
      <el-form
        :model="form"
        :rules="rules"
        ref="ruleForm"
        label-width="80px">
        <el-form-item
          label="所属学科"
          prop="subjectID"
          v-if="Object.keys(this.$route.query).length == 0"
          >
          <el-select
            style="width: 100%"
            v-model="form.subjectID"
            placeholder="请选择"
            >
              <el-option
                v-for="item in data"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                >
              </el-option>
          </el-select>
        </el-form-item >
        <el-form-item
          label="目录名称"
          style="width: 100%"
          prop="tagName">
          <el-input
            placeholder="请输入目录名称"
            v-model="form.tagName"
            autocomplete="off">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button type="primary" :loading="Loading" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>

 </div>
</template>
<script>
import { add, update } from '@/api/hmmm/tags'
export default {
  props: {
    /* 弹出框控制 */
    value: {
      type: Boolean,
      default: false
    },
    /* 请求数据的分类 */
    data: {
      type: Array,
      default: () => []
    },
    /* 点击当前行的回显数据 */
    echoList: {
      type: Object,
      default: () => {}
    },
    /* 判断是修改还是添加 */
    up: {
      type: String,
      default: ''
    },
    /* 传入父组件数据,检查路由是否携带参数 */
    paging: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      /* 加载状态 */
      Loading: false,
      /* 请求数据 */
      form: {
        subjectID: null,
        tagName: null
      },
      /* 校验规则 */
      rules: {
        subjectID: [
          { required: true, message: '请选择内容', trigger: 'blur' }
        ],
        tagName: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    /* 确认 */
    submitForm () {
      this.$refs.ruleForm.validate(async (valid) => {
        this.Loading = true
        if (valid) {
          /* 判断是修改还是添加 */
          if (this.up === 'add') {
            /* 判断是否有路由值 */
            if (Object.keys(this.$route.query).length > 0) {
              //
              await add({ subjectID: Number(this.paging.subjectID), tagName: this.form.tagName })
              if (this.up === 'add') {
                this.$emit('fenYe')
              }
              this.Loading = false
              this.$emit('fresh')
              this.resetForm()
              return
            } else {
              //
            }
            await add(this.form)
            if (this.up === 'add') {
              this.$emit('fenYe')
            }
            this.Loading = false
            this.$emit('fresh')
            this.resetForm()
          } else if (this.up === 'up') {
            await update(this.form)
            if (this.up === 'add') {
              this.$emit('fenYe')
            }
            this.Loading = false
            this.$emit('fresh')
            this.resetForm()
          }
        } else {
          this.Loading = false
        }
      })
    },
    /* 取消 */
    resetForm () {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('input', false)
    },
    /* 弹出框打开的回调函数 */
    open () {
      /* 通过父组件点击不同按钮的值来判断是添加还是修改 */
      //
      if (this.up === 'up') {
        //
        // this.form = this.echoList
        this.form = JSON.parse(JSON.stringify(this.echoList))
      } else if (this.up === 'add') {
        this.form = {}
      }
    },
    /* 弹窗关闭的回调 */
    closed () {
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields()
      })
      this.$emit('input', false)
      this.form = this.$options.data().form
    }
  }
}
</script>
<style lang='scss'  scoped>

</style>
